<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title><meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>Matrimony | Register</title>
        <link href="css/bootstrap.css" rel="stylesheet" media="screen"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function validateNumber(evt) {
                var theEvent = evt || window.event;
                var key = theEvent.keyCode || theEvent.which;
                // Don't validate the input if below arrow, delete and backspace keys were pressed 
                if (key === 37 || key === 38 || key === 39 || key === 40 || key === 8 || key === 46) { // Left / Up / Right / Down Arrow, Backspace, Delete keys
                    return;
                }
                key = String.fromCharCode(key);
                var regex = /[0-9\r]|\./;
                if (!regex.test(key)) {
                    theEvent.returnValue = false;
                    if (theEvent.preventDefault)
                        theEvent.preventDefault();
                }
            }

        </script>
    </h:head>

    <h:body>
        <f:view>
            
                <div id="page-wrap">
                    <div id="banner">
                        <h1><a href="index.xhtml">Matrimony</a></h1>
                    </div><!--End banner-->
                    <div id="main-content">
                        <div id="sidebar">
                            <h:form>
                    <div id="mainNav">
                        <ul>
                             <li><h:commandLink action="#{matrinonyBean_c.gotoHome()}" value="Home"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoRegister()}" value="Register"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoSearch()}" value="Search"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoService()}" value="Service"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoContact()}" value="Contact"/></li>
                        </ul>
                    </div><!--End mainNav-->
                    </h:form>
                            <br/>
                        </div><!--End sidebar-->
                        <h:form>
                        <div id="primary">
                            <div class="post-item">
                                <h1><a href="#">REGISTRATION</a></h1>
                                <p style="font-size: 1.5em ; line-height: 1.5em">
                                    Matrimony Service is intended solely for user 18 years of age or older. Any registration by, use of, or access to this site by anyone under 18 is unauthorized, unlicensed and in violation.
                                    If you decide to become a Member, and therefore pay our Membership fee, you are agreeing to take the Membership we make available to you promptly upon receipt of that fee.
                                </p>
                            </div><!--End post-item-->
                            <div class="post-item">
                                <h1><a href="">LOGIN INFORMATION</a></h1>
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Username :</label>
                                        <h:inputText class="form-control" value="#{registerBean_c.username}" maxlength="20"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div> 
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Password :</label>
                                        <h:inputSecret id="password" class="form-control" value="#{registerBean_c.password}" maxlength="20"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Email :</label>
                                        <h:inputText id="email" class="form-control" value="#{registerBean_c.email}" maxlength="50"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                            </div><!--End post-item-->

                            <div class="post-item">
                                <h1><a href="#">BASIC INFORMATION</a></h1>

                                <div class="control-group">
                                    <div class="controls">
                                        <label>Your Full Name :</label>
                                        <h:inputText id="fullname" class="form-control" value="#{registerBean_c.fullName}" maxlength="50"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div> 
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Your Birth Day :</label>
                                        <h:inputText id="dob" class="form-control" value="#{registerBean_c.dateOfBirth}" label="Date of birth">
                                            <f:convertDateTime type="date" pattern="dd/MM/yyyy" timeZone="Etc/GMT+7"/>                                           
                                        </h:inputText>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Gender :</label>
                                        <h:selectOneRadio id="gender" required="true" requiredMessage="Please select your gender" value="#{registerBean_c.gender}" layout="pageDirection" >
                                            <f:selectItem itemLabel="Male" itemValue="Male"/>
                                            <f:selectItem itemLabel="Female" itemValue="Female"/>
                                            <f:validateRequired/>
                                        </h:selectOneRadio>
                                        <h:message for="gender" style="color: red"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Your Phone Number :</label>
                                        <h:inputText class="form-control" value="#{registerBean_c.contactNumber}" maxlength="12" onkeypress="validateNumber(event)"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Caste :</label>
                                        <h:selectOneMenu id="caste" class="form-control" required="true" requiredMessage="Please choose your caste" value="#{registerBean_c.casteId}">
                                            <f:selectItem itemLabel="-- Choose one --" noSelectionOption="true"/>
                                            <f:selectItems  value="#{casteBean_c.loadCaste()}" var="c" itemLabel="#{c.caste_Name}" itemValue="#{c.caste_Id}"/>
                                            <f:validateRequired/>
                                        </h:selectOneMenu>
                                        <h:message  for="caste" style="color: red"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Marital Status :</label>
                                        <h:selectOneMenu id="marital-status" required="true" requiredMessage="Please choose your marital status" value="#{registerBean_c.maritalStatus}" class="form-control">                                           
                                            <f:selectItem itemLabel="-- Choose one --" noSelectionOption="true"/>
                                            <f:selectItem itemLabel="Unmarried" itemValue="Unmarried"/>
                                            <f:selectItem itemLabel="Divorced" itemValue="Divorced"/>
                                            <f:selectItem itemLabel="Widowed" itemValue="Widowed"/>
                                            <f:validateRequired/>
                                        </h:selectOneMenu>
                                        <h:message for="marital-status" style="color: red"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Religions :</label>
                                        <h:selectOneMenu id="religion" required="true" requiredMessage="Please choose your religion" value="#{registerBean_c.religionId}" class="form-control">
                                            <f:selectItem itemLabel="-- Choose one --" noSelectionOption="true"/>
                                            <f:selectItems  value="#{religionBean_c.loadReligion()}" var="r" itemLabel="#{r.religion_Name}" itemValue="#{r.religion_Id}"/>
                                            <f:validateRequired/>
                                        </h:selectOneMenu>
                                        <h:message for="religion" style="color: red"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Mother Tongue :</label>
                                        <h:selectOneMenu id="mother-tongue" required="true" requiredMessage="Please choose your mother tongue" value="#{registerBean_c.motherTongue}" class="form-control">
                                            <f:selectItem itemLabel="-- Choose one --" noSelectionOption="true"/>
                                            <f:selectItem itemLabel="VietNamese" itemValue="VietNamese"/>
                                            <f:selectItem itemLabel="English" itemValue="English"/>
                                            <f:selectItem itemLabel="Other" itemValue="Other"/>
                                            <f:validateRequired/>
                                        </h:selectOneMenu>
                                        <h:message for="mother-tongue" style="color: red"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <label>Country living in : </label>     
                                        <h:selectOneMenu id="countries" required="true" requiredMessage="Please choose your living country" value="#{registerBean_c.country}" class="form-control" converter="omnifaces.SelectItemsConverter">
                                            <f:selectItem itemLabel="-- Choose Country --" itemValue="#{null}"/>
                                            <f:selectItems value="#{registerBean_c.listCountries}" var="c" itemLabel="#{c.countryName}" itemValue="#{c}"/>
                                            <f:ajax listener="#{registerBean_c.listAllCitiesByCountryId()}" event="change" render="cities"/>
                                            <f:validateRequired/>
                                        </h:selectOneMenu>
                                        <h:message for="countries" style="color: red"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <label>City : </label>
                                        <h:selectOneMenu id="cities" required="true" requiredMessage="Please choose your living city" value="#{registerBean_c.city}" class="form-control" converter="omnifaces.SelectItemsConverter">
                                            <f:selectItem itemLabel="-- Choose City --" itemValue="#{null}"/>
                                            <f:selectItems value="#{registerBean_c.listCities}" var="ct" itemLabel="#{ct.cityName}" itemValue="#{ct}"/>
                                            <f:validateRequired/>
                                        </h:selectOneMenu>
                                        <h:message for="cities" style="color: red"/>
                                        <div class="help-block"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="post-item">
                                <div class="control-group">
                                    <div class="controls">
                                        <h:selectBooleanCheckbox id="agreement" value="#{registerBean_c.agreementChecked}"> 
                                            <f:ajax event="change" render="register-now"/>
                                        </h:selectBooleanCheckbox>                        
                                        <h:outputLabel value="I agree with the Matrimony Terms of Service" for="agreement"/>
                                    </div>
                                </div><!--End post-item-->
                                <h:commandButton id="register-now" disabled="#{!registerBean_c.agreementChecked}" value="Submit" class="btn btn-primary pull-right" action="#{registerBean_c.registerAcc()}">
                                </h:commandButton>
                                <!--Btn Boostrap-->
                            </div>
                        </div><!-- End primary -->
                        </h:form>
                    </div><!-- End main content -->
                    <div id="footer">
                        <h:form>
                <div id="footerNav">
                    <p class="copyright">Copyright 2013 Group 3 - C1103L - Matrimony site .</p>
                    <ul>
                        <li><h:commandLink action="#{matrinonyBean_c.gotoHome()}" value="Home"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoRegister()}" value="Register"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoSearch()}" value="Search"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoService()}" value="Service"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoContact()}" value="Contact"/></li>
                    </ul>

                </div><!--End footerNav-->
                </h:form>
                        <div id="footerInfo">
                            <img src="images/author.png" alt="author comment" />
                            <div class="rules">
                                <div class="inside">
                                    <p>
                                        The wedding event is no more a home manageable affairs where one requires the different service providers to be contacted and negotiated. Furthermore, the precious time and resources consumed during the whole process of finding and searching the ideal match. In Today’s generation the search of the life partner is searched through internet. The candidate can input his/her requirement according to their needs and perform search operation to get their Ideal Match. This process has now gain success it is less time consuming and multiple searches can be implemented in less time.
                                    </p>
                                    <ol>
                                        <li>If you want to <a href="search.html">look for</a> groom or bride , please go to <a href="index.html">Matrimony</a> site .</li>
                                        <li><a href="contact.html">Contact us</a> when you have any questions need answer .</li>
                                        <li>Please <a href="register.html">register</a> to experience .</li>
                                    </ol>

                                    <p><a href="index.html">That's it! Enjoy your stay and remember to comeback often.</a></p>
                                </div><!--End inside-->
                            </div><!--End rules-->
                        </div><!--End footerInfo-->
                    </div><!--End footer-->
                </div>

            
        </f:view>
    </h:body>
</html>

